<template>
  <div class="PanelFuc">
    <div v-for="(v, i) of panelData" :key="i">
      <!--  mb: !v.showChild, 'mb-n': v.showChild  -->
      <div
        :class="{ 'out-title': true }"
        @click="
          () => {
            v.showChild = !v.showChild
          }
        "
      >
        {{ v.meta.title }}
        <span style="float: right">
          <svg
            v-if="!v.showChild"
            class="icon"
            height="16"
            p-id="4463"
            t="1666836539274"
            version="1.1"
            viewBox="0 0 1024 1024"
            width="16"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M483.072 714.496l30.165333 30.208 415.957334-415.829333a42.837333 42.837333 0 0 0 0-60.288 42.538667 42.538667 0 0 0-60.330667-0.042667l-355.541333 355.413333-355.242667-355.413333a42.496 42.496 0 0 0-60.288 0 42.837333 42.837333 0 0 0-0.085333 60.330667l383.701333 383.872 1.706667 1.749333z"
              fill="#3D3D3D"
              p-id="4464"
            />
          </svg>
          <svg
            v-else
            class="icon"
            height="16"
            p-id="4667"
            t="1666836580109"
            version="1.1"
            viewBox="0 0 1024 1024"
            width="16"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M483.029333 286.165333l30.165334-30.208 415.957333 415.829334c16.426667 16.426667 16.64 43.648 0 60.288a42.538667 42.538667 0 0 1-60.330667 0.042666L513.28 376.746667l-355.242667 355.413333a42.496 42.496 0 0 1-60.288 0 42.837333 42.837333 0 0 1-0.085333-60.330667l383.701333-383.872 1.706667-1.749333z"
              fill="#3D3D3D"
              p-id="4668"
            />
          </svg>
        </span>
      </div>
      <div
        v-if="v.children"
        class="childList"
        :class="{ isShowChild: v.showChild }"
        :style="{ height: v.showChild ? `${v.children.length * 39}px` : 0 }"
      >
        <div v-for="(vv, ii) of v.children" :key="ii" class="in-title" @click="clickItem(vv)">{{ vv.meta.title }}</div>
      </div>
    </div>
  </div>
</template>
<script>
  import { defineComponent, reactive, toRefs } from 'vue'
  export default defineComponent({
    name: 'MenuList',
    components: {},
    props: {
      panelData: {
        type: Array,
        default() {
          return []
        },
      },
    },
    emits: ['clickitem'],
    setup(props, context) {
      let PanelFuc = reactive({
        activeNames: ['1'],
        panelData: props.panelData,
      })

      console.log('PanelFuc ----- ', PanelFuc)

      function clickItem(item) {
        context.emit('clickitem', item)
      }
      return { ...toRefs(PanelFuc), clickItem }
    },
  })
</script>

<style lang="scss">
  .PanelFuc {
    // background: #fff !important;
    height: 100% !important;
    font-size: 1rem !important;

    background: #efeded !important;
    .childList {
      height: 0;
      overflow: hidden;
      overflow-y: auto;
      // transition: all 0.02s;
    }
    .isShowChild {
      height: 100px;
    }
    .out-title {
      font-weight: bold !important;
      text-align: left !important;
      background: #fff !important;
      padding: 15px !important;
      // margin: 0px 15px;
      margin: 8px 15px;
      width: calc(100% - 30px);
      font-size: 1.1rem !important;
    }
    .mb {
      margin-bottom: 8px !important;
    }
    .mb-n {
      margin-bottom: 0px !important;
    }

    .in-title {
      font-size: 1rem !important;
      // font-weight: bold;
      margin: 0px 15px;
      width: calc(100% - 30px);
      padding: 10px !important;
      background: #fff !important;
      text-align: left !important;
      text-indent: 20px;
      font-size: rgb(122, 119, 119);
      border-bottom: 1px solid #ccc;

      // padding: 0.5rem 0px !important;
    }
  }
</style>
